<template>
    <el-container style="background-color:aliceblue;">
<!--      <el-header>
        <el-button type="primary" icon="el-icon-platform-eleme" style="float: right;">维修首页</el-button>
        <el-button type="info" icon="el-icon-info" style="float: right;">通知公告</el-button>
        <el-button type="success" icon="el-icon-search" style="float: right;">服务指南</el-button>
        <el-button type="warning" icon="el-icon-user-solid" style="float: right;">用户中心</el-button>
      </el-header> -->
      <el-header style="height: 100%;padding: 0;background-color: aliceblue;">
          <div style="background-color: cornflowerblue;height: 40px;">
            <el-col :span="8"><div class="index-title" style="line-height: 40px;color: white;">
              <router-link style="margin-right: 30px;color: white" :to="'/index'">数字后勤服务大厅</router-link>
              <a>运架中心</a>
              <a>服务监督</a>
            </div></el-col>
            <el-col :span="8"  style="line-height: 40px;color: white;"><div class="index-title"><a>膳食中心</a></div></el-col>
            <el-col :span="8">
              <div style="line-height: 40px;color: white;">
               <router-link style="margin-right: 30px;text-decoration: none;color: white;" :to="'/PersonalCenter'">{{user.accountName}}</router-link>
              </div>
              <div style="line-height: 40px;color: white;">
               <a href="javascript:void(0)" @click="logout()" style="position: absolute;top: 0px;margin-left: 300px;text-decoration: none;color: white;">退出登录</a>
              </div>
            </el-col>
          </div>

            <el-col :span="18"><div style="margin-top: 20px;"><img src="../../static/img/logo-repair.png"/></div></el-col>
            <el-col :span="6">
              <div class="index-repair-home" @click="jumpTo('/index')">
                <div class="index-menu-box">
                  <!-- style="display: none; -->
                  <div class="index-box-text">
                    首页<br />
                    <span>Home</span>
                  </div>
                  <div class="index-menu-logo">
                    <img src="../../static/img/icon-home.png"/>
                  </div>
                </div>
              </div>

              <div class="index-repair-notice" @click="jumpTo('/notice')">
                  <div class="index-menu-box">
                    <div class="index-box-text">
                      通知<br />
                      <span>notice</span>
                    </div>
                  <div class="index-menu-logo">
                    <img src="../../static/img/icon-notice.png"/>
                  </div>
                </div>
              </div>

              <div class="index-repair-service" @click="jumpTo('/serviceGuide')">
                <div class="index-menu-box">
                  <div class="index-box-text">
                    服务帮助<br />
                    <span>help</span>
                  </div>
                  <div class="index-menu-logo">
                    <img src="../../static/img/icon-notice.png"/>
                  </div>
                </div>
              </div>
              </div></el-col>

      </el-header>
      <el-main>
        <el-descriptions class="margin-top" title="详情信息" :column="3">
          <template slot="extra">
            <el-button v-if="role.isStudent" type="primary" size="small" @click="test()">评价</el-button>
          </template>
          <el-descriptions-item label="报修人">{{loginuser.username}}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{loginuser.userPhone}}</el-descriptions-item>
          <el-descriptions-item label="报修编号">{{loginuser.repairNum}}</el-descriptions-item>
          <el-descriptions-item label="维修类别:">
            <el-tag size="small">{{loginuser.pname}}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="故障描述:">
            <span style="white-space: pre-line;" v-html="loginuser.repairContent"></span>
          </el-descriptions-item>
          <el-descriptions-item label="报修时间:">
            <el-tag size="small">{{loginuser.repairDate}}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="联系地址">{{loginuser.area}}</el-descriptions-item>
        </el-descriptions>
        <el-dialog
          title="评价"
          :visible.sync="dialogVisible"
          size="tiny"
          v-if="loginuser.repairState==5?true:false || loginuser.repairState==6?true:false"
          >
          <span>
            维修是否及时:<el-rate
              v-model="value1"
              show-text>
            </el-rate>
            维修人员态度是否良好:<el-rate
              v-model="value2"
              show-text>
            </el-rate>
            <el-input v-model="input" placeholder="请输入内容"></el-input>
          </span>
          <span slot="footer" class="dialog-footer">
            <el-button type="warning" @click="dialogVisible = false">关闭</el-button>
            <el-button type="success" @click="sure()"
            :disabled='show'
            >评价</el-button>
          </span>
        </el-dialog>

      </el-main>
      <div style="height: 300px;margin-left:200px">
        <el-steps direction="vertical" :active="loginuser.repairState">
          <el-step title="报修" description="已申请维修" v-show="repair==null?false:true"></el-step>
          <el-step title="审核" :description="vet" v-show="vet==null?false:true"></el-step>
          <el-step title="派工" :description="dispatch" v-show="dispatch==null?false:true"></el-step>
          <el-step title="维修中" :description="settle" v-show="settle==null?false:true"></el-step>
          <el-step title="完工" :description="complete" v-show="complete==null?false:true"></el-step>
          <el-step title="驳回" :description="reject" v-if="reject==null?false:true"></el-step>
        </el-steps>
        <div style="margin-top: -18%;margin-left: 30%;">
          <p>报修照片</p><p style="margin-left: 30%;margin-top: -5%;" v-if="img==null||img==''?false:true">完工照片</p>
        <img style="width: 300px;height: 250px;" :src="img1" />
        <img style="width: 300px;height: 250px;" :src="img" v-if="img==null||img==''?false:true"/>
      <el-table
      :data="material"
      style="width: 500px;margin-top: -25%;margin-left: 60%;">
      <el-table-column
        prop="dictAllName"
        label="材料"
        width="180">
      </el-table-column>
      <el-table-column
        prop="meteringUnit"
        label="单位"
        width="180">
      </el-table-column>
      <el-table-column
        prop="count"
        label="个数">
      </el-table-column>
    </el-table></div>
      </div>
    </el-container>
</template>

<script>
  export default {
    name: "repair",
    data() {
      return {
        dialogVisible: false,
        //维修是否及时满意度评分
         value1: null,
         //维修人员态度满意度
         value2:null,
         loginuser:{},
         //评价内容
         input:'',
         repairNum:'',
         logs:[],
         repair:'',
         //审核
         vet:'',
         //派工
         dispatch:'',
         //决算
         settle:'',
         //驳回
         reject:'',
          //完工
         complete:'',
         //展示图片
         img:'',
         img1:'',
         role:{
           isStudent: JSON.parse(localStorage.getItem("user")).data.state == 2 ? true : false,
           isManager: JSON.parse(localStorage.getItem("user")).data.state == 0 ? true : false,
           isRepairer: JSON.parse(localStorage.getItem("user")).data.state == 1 ? true : false
         },
         user:JSON.parse(localStorage.getItem("user")).data,
         material:[],
         //按钮显示条件
         show:false


      }
    },
    methods: {
      sure(){
        //value拿到的int
        var user=JSON.parse(localStorage.getItem("user"))
        if(this.value1==null || this.value1==''||this.value2==null||this.value2==null||this.input==null||this.input==''){
          alert("评价不可为空")
          return
        }
        this.$http.post("/repairEvaluate/add",{
          repairnum:this.repairNum,
          evaluateuser:user.data.account,
          evaluateusername:user.data.accountName,
          attitudestar:this.value2,
          timelystar:this.value1,
          evaluatecontent:this.input
        }).then(resp=>{
          if(resp.data.code==200){
            this.show=true
            alert("评价成功")
          }else{
            alert("不可重复评价！")
          }
        })
        this.dialogVisible=false;

      },
      getMeterial(){
        this.$http.get("/repairMaterial/getRepairMaterial",{
          params:{
            repairnum:this.repairNum
          }
        }).then(resp=>{
          console.log(1111111)
          console.log(resp.data.data)
          this.material = resp.data.data
        })
      },
      logout(){
      	this.$http.get("/logout")
        localStorage.removeItem("user")
        location.reload()
      },
      jumpTo(route){
        this.$router.push(route)
      },
      test(){
        console.log("aaa")
        if(this.loginuser.repairState==1 ||this.loginuser.repairState==2 ||this.loginuser.repairState==3||this.loginuser.repairState==4 ){
          alert("还未完工，不可评价")
        }
         this.dialogVisible=true
      }
    },
    created() {
      var user=JSON.parse(localStorage.getItem("user"))
      this.repairNum = this.$route.query.repairnum
      this.getMeterial()
      this.$http.post("/repairInfo/showpersnal",{repairNum:this.repairNum}).then(resp=>{
        console.log(resp)
        this.loginuser=resp.data.data
        this.value1=resp.data.data.timelystar
        this.value2=resp.data.data.attitudestar
        this.input=resp.data.data.evaluatecontent
        if(resp.data.data.timelystar==null||resp.data.data.timelystar==''){
          this.show=false;
        }else{
          this.show=true;
        }
        console.log(this.loginuser)
      }),
      this.$http.post("/getrepairlog",{repairNum:this.repairNum}).then(resp=>{
       console.log(resp.data.data)
       this.logs=resp.data.data
       for(let i=0;i<this.logs.length;i++){
         if(this.logs[i].state==1){
            this.repair=this.logs[i].operDate+":"+this.logs[i].repairname+"申请报修"
         }
         if(this.logs[i].state==2){
            this.vet=this.logs[i].operDate+":"+this.logs[i].repairname+"正在审核"
         }
         if(this.logs[i].state==3){
           this.dispatch=this.logs[i].operDate+":"+this.logs[i].repairname+"已派工"+"耗时:"+this.logs[i].resptime+"分"
         }
         if(this.logs[i].state==4){
           this.settle=this.logs[i].operDate+":"+this.logs[i].repairname+"开始维修工作"
         }
         if(this.logs[i].state==5){
           this.complete=this.logs[i].operDate+":"+this.logs[i].repairname+"已关闭订单,总耗时:"+this.logs[i].resptime+"分"
         }
         if(this.logs[i].state==6){
           this.reject=this.logs[i].operDate+":"+this.logs[i].repairname+"已驳回,驳回原因："+this.logs[i].operReason
         }else{
           this.reject=null
         }
       }
       // this.repair=this.logs[0].operDate+":"+this.logs[0].repairname+"申请报修"
       // this.vet=this.logs[1].operDate+":"+this.logs[1].repairname+"正在审核"
       // this.dispatch=this.logs[2].operDate+":"+this.logs[2].repairname+"已派工"+"耗时:"+this.logs[2].resptime+"分"
       // this.settle=this.logs[3].operDate+":"+this.logs[3].repairname+"耗时"+this.logs[3].resptime+"分完成维修工作"
       // this.complete=this.logs[4].operDate+":"+this.logs[4].repairname+"已关闭订单,总耗时:"+this.logs[4].resptime+"分"
       // console.log(this.logs[0])
      }),
      //维修完成的图片,repairUsername:user.data.accountName
      this.$http.post("/repairAttachment/ShowOss",{repairNum:this.repairNum}).then(resp=>{
        console.log(resp.data.data)
        this.img=resp.data.data.img2
        this.img1=resp.data.data.img1
      })
    }
  }
</script>

<style>
</style>
